<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url(./beijing.jpeg);
        }
        body table {
           
            margin: 0 auto;
        }


        table caption {
            font-family: 'Courier New', Courier, monnospace;
            font-size: 30px;
        }

        .table.td {
            width: 100px;
            height: 100px;
        }

        img {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <h1>打地鼠</h1>
    <h3>分数：</h3>
    <table>
        <tr>
            <!-- <td><img src="./d1.gif" onclick="die()"></td> -->
            <td><img src="./d1.gif" ></td>
            <td><img src="./d1.gif"></td>
            <td><img src="./d1.gif"></td>
        </tr>
        <tr>
            <td><img src="./d1.gif"></td>
            <td><img src="./d1.gif"></td>
            <td><img src="./d1.gif"></td>
        </tr>
        <tr>
            <td><img src="./d1.gif"></td>
            <td><img src="./d1.gif"></td>
            <td><img src="./d1.gif"></td>
        </tr>
    </table>
    <script type="text/javascript">
        var imgs=document.getElementsByTagName("img")
        var sui
        var count=0

        //延迟1s后将 字符串作为js语句执行
        setTimeout("chulai()",1000); 
        
        
        // setTimeout(function(){
        //     console.log();
        // },1000)

        // setTimeout(chulai,1000);


        function chulai() {
            sui=Math.floor(Math.random()*9)
            imgs[sui].src="./d2.gif"
            // imgs[sui].setAttribute("onclick","die()")

            imgs[sui].onclick= function(){
                die();
            }

            imgs[sui].style.marginTop="0px"
            setTimeout("huiqu()",1000)
        }
        function huiqu() {
            imgs[sui].src="./d1.gif"
            imgs[sui].removeAttribute("onclick")
            imgs[sui].style.marginTop="30px"
            setTimeout("chulai()",1000)
        }
        function die() {
            imgs[sui].src="./d3.gif"
            imgs[sui].removeAttribute("onclick")
            imgs[sui].style.marginTop="0px"
            count+=10
            document.getElementsByTagName("h3")[0].innerHTML=`分数:${count}分`
        }
    </script>
</body>

</html>
